<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <!-- 
    面试题：vue开发时 v-for 为什么一定要绑定key ? ==> v-for 绑定key和不绑定key的区别?
        如果不绑定key vue采用就近DOM复用原则进行页面渲染操作，此时数据发生变化，页面更新时数据和元素直接不会产生一一对应关系；
        如果绑定了key vue在完成数据渲染时，会优先寻找数据对应的标签进行操作，数据和标签之间存在一一对应关系
        key取值循环下标没有意义 => 【模块化环境中定义v-for不定义key程序报错】
    -->
    <div id="app">
        <pre v-pre class="note">
        + key 的定义可以提升vue对页面元素渲染时的渲染效率
            => vue采用dom复用和就近原则进行页面渲染
                - dom复用:vue在渲染页面时，如果发现操作的标签在页面上存在相同的标签，会优先考虑标签复用
                - dom复用的就近原则:被复用的元素为相邻元素，或者属于同vue语法操作的元素
            => 当元素在完成vue语法操作时，发现该标签通过key完成了 !唯一值绑定! ,vue会将该元素和数据始终保存对应关系
                - 唯一值绑定 => 同vue容器中 所有的key都必须保持唯一
                - 如果key值无法保持唯一，数据和元素的对应关系不生效【和没有绑定key一样】
                - v-for 循环使用的key,基本都为服务器响应数据的 唯一ID
                - key值在v-for循环中绑定数据下标，和没有绑定key效果一样
        </pre>
        <input type="button" value="addNname" @click="addName()">
        <ul>
            <!-- <li v-for="n in names" key="1"> -->
            <!-- <li v-for="n in names" :key="n"> -->
            <li v-for="(n,i) in names" :key="i">
                <input type="checkbox">
                {{ n }}
            </li>
        </ul>
        <hr>
        <input type="button" value="addNname" @click="addName2()">
        <ul>
            <li v-for="n in names2" :key="n.id">
                <input type="checkbox">
                {{ n.name }}
            </li>
        </ul>
        <hr>
        <input type="button" value="addNname" @click="addName3()">
        <ul>
            <li v-for="n in names3">
                <input type="checkbox" :checked="n.state" @change=" n.state=$event.target.checked ">
                {{ n.name }}
            </li>
        </ul>
    </div>
    <script src="../assets/mockjs/mock-min.js"></script>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    names:Mock.mock({
                        "names|2":[
                            "@cname"
                        ]
                    }).names,

                    names2:Mock.mock({
                        "names|2":[
                            { 
                                name:"@cname",
                                id:"@id"
                            }
                        ]
                    }).names,

                    names3:Mock.mock({
                        "names|2":[
                            { 
                                name:"@cname",
                                id:"@id",
                                state:false
                            }
                        ]
                    }).names
                }
            },
            methods:{
                addName(){
                    // this.names.push( Mock.mock("@cname") )
                    this.names.unshift( Mock.mock("@cname") )
                },
                addName2(){
                    this.names2.unshift( Mock.mock({
                        name:"@cname",
                        id:"@id"
                    }) )
                },
                addName3(){
                    this.names3.unshift( Mock.mock({
                        name:"@cname",
                        id:"@id",
                        state:false
                    }) )
                }
            }
        }).mount("#app");
    </script>
</body>
</html>